<template>
  <view class="change-phone">
    <!-- 标题 -->
    <view class="title">修改手机号</view>

    <!-- 提示信息 -->
    <view class="tip">
      <text>修改手机号码后，可以使用新手机号登录招聘网，聊天时，“交换电话”功能的手机号会一同修改</text>
	  <text>当前手机号：130*****00</text>
    </view>

    <!-- 新手机号输入 -->
    <view class="input-section line">
      <view class="phone-prefix">
        <text>+86</text>
        <text class="arrow">▼</text>
      </view>
      <input class="phone-input" type="number" v-model="newPhone" placeholder="请输入新手机号" />
    </view>

    <!-- 验证码输入 -->
    <view class="input-section">
      <input class="code-input" type="number" v-model="verificationCode" placeholder="请输入验证码" />
      <view class="get-code" @click="getVerificationCode">
        <text>{{ codeButtonText }}</text>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tip-last">
		<image src="/static/img/Warning.svg" class="warn"></image>
      长时间收不到验证码，可尝试语音接听验证码
    </view>

    <!-- 保存按钮 -->
    <view class="save-button" @click="savePhone">
      保存
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newPhone: "", // 新手机号
      verificationCode: "", // 验证码
      codeButtonText: "获取验证码", // 验证码按钮文字
      countdown: 60, // 倒计时
      timer: null, // 定时器
    };
  },
  methods: {
    // 获取验证码
    getVerificationCode() {
      if (!this.newPhone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      // 模拟发送验证码
      uni.showToast({
        title: "验证码已发送",
        icon: "none",
      });

      // 开始倒计时
      this.startCountdown();
    },
    // 开始倒计时
    startCountdown() {
      if (this.timer) clearInterval(this.timer);
      this.codeButtonText = `${this.countdown}秒后重试`;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.codeButtonText = "获取验证码";
          this.countdown = 60;
        } else {
          this.codeButtonText = `${this.countdown}秒后重试`;
        }
      }, 1000);
    },
    // 保存手机号
    savePhone() {
      if (!this.newPhone) {
        uni.showToast({
          title: "请输入新手机号",
          icon: "none",
        });
        return;
      }
      if (!this.verificationCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }

      // 模拟保存成功
      uni.showToast({
        title: "保存成功",
        icon: "success",
      });

      // 这里可以添加保存逻辑，例如调用 API 保存新手机号
    },
  },
};
</script>

<style scoped>
.change-phone {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.tip{
  margin-bottom: 20px;
  color: #333;
  font-family: "PingFang SC";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.tip text{
	display: block;
}

.tip-last{
	color: #999;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "PingFang SC";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-bottom: 20px;
}

.warn{
	width: 12px;
	height: 12px;
}


.input-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.line{
	border-bottom: 1px solid #ebebeb;
}

.phone-prefix {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.arrow {
  margin-left: 5px;
  font-size: 12px;
  color: #666;
}

.phone-input,
.code-input {
  flex: 1;
  height: 40px;
  font-size: 16px;
  color: #333;
}

.get-code {
  margin-left: 10px;
  cursor: pointer;
}

.get-code text {
  font-size: 14px;
  color: #2F318B;
}

.save-button {
  width: 100%;
  		height: 80rpx;
  		line-height: 80rpx;
      background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
    	border-radius: 32px;
  		font-size: 32rpx;
  		color: #fff;
  text-align: center;
}
</style>